import { StyleProvider, legacyLogicalPropertiesTransformer } from '@ant-design/cssinjs';
import { ConfigProvider, message, notification } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import 'dayjs/locale/zh-cn';
import { useEffect } from 'react';
import Index from './routers/index';
import { StoresProvider } from './store/index';

function App() {
  const [api, contextHolder] = notification.useNotification();
  useEffect(() => {
    if (!window.$message) {
      window.$message = message;
    }
    if (!window.$notify) {
      window.$notify = api;
    }
  }, []);

  const isCompatible = () => {
    var userAgent = window.navigator.userAgent;

    var isOpera = userAgent.indexOf('Opera') > -1 || userAgent.indexOf('OPR') > -1; //判断是否Opera浏览器

    var isQQ = userAgent.indexOf('QQBrowser') > -1; //判断是否QQBrowser浏览器

    var isUC = userAgent.indexOf('UCBrowser') > -1; //判断是否UC浏览器

    var isIE = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1; //判断是否IE7~IE10浏览器

    var isIE11 = userAgent.indexOf('compatible') === -1 && userAgent.indexOf('Trident') > -1; //判断是否IE11浏览器

    var isEdge = userAgent.indexOf('Edge') > -1; //判断是否IE的Edge浏览器

    var isChrome = userAgent.indexOf('Chrome') > -1 && userAgent.indexOf('Safari') > -1; //判断Chrome浏览器

    var is360 = userAgent.indexOf('Chrome') > -1 && userAgent.indexOf('; WOW') > -1;

    var chromeVersion = 0;
    if (isChrome || is360) {
      chromeVersion = userAgent.match(/Chrome\/([0-9.]+)/)[1].split('.')[0];
    }
    // other browser
    return (chromeVersion !== 0 && chromeVersion < 88) || isQQ || isOpera || isIE || isUC || isIE11 || isEdge;
  };

  return isCompatible() ? (
    <ConfigProvider locale={zhCN}>
      <StyleProvider hashPriority="high" transformers={[legacyLogicalPropertiesTransformer]}>
        <StoresProvider>
          <>
            {contextHolder}
            <Index />
          </>
        </StoresProvider>
      </StyleProvider>
    </ConfigProvider>
  ) : (
    <ConfigProvider locale={zhCN}>
      <StoresProvider>
        <>
          {contextHolder}
          <Index />
        </>
      </StoresProvider>
    </ConfigProvider>
  );
}

export default App;
